<template>
    <div class="header_container">
        <el-icon :size="30" color="white" class="aside_menu_expand" @click="clickMenuCollapse">
            <component :is="asideMenuInfo.menuCollapse? 'Fold': 'Expand'"></component>
        </el-icon>
        <span class="header_title">{{ userInfo.realName }}的存储空间</span>
        <div class="space_fill"></div>

        <!--刷新主展示区-->
        <el-tooltip content="刷新" placement="bottom">
            <el-icon :class="refreshStyle" :size="20" color="purple" @click="clickRefresh">
                <Refresh></Refresh>
            </el-icon>
        </el-tooltip>

        <!--展示全屏/退出全屏按钮-->
        <el-tooltip 
            :content="isFullScreen? '点击退出全屏':'点击进入全屏'" 
            placement="bottom"
            v-if="supportFullScreen">
            <el-icon class="full_screen" :size="20" color="purple" @click="clickFullScreen">
                <FullScreen></FullScreen>
            </el-icon>
        </el-tooltip>
        
        <!--是否展示导航面包屑-->
        <el-tooltip :content="switchTips" placement="bottom">
            <el-switch
                v-model="topBreadcrumbInfo.showTopBreadcrumb"
                :active-value = "true"
                :inactive-value = "false"
                class="top_breadcrumb_switch"
            />
        </el-tooltip>
        
        <!--用户头像与用户名称-->
        <div class="user_info_container">
            <div class="user_info">
                <el-avatar :src="userInfo.avatarUrl"></el-avatar>
                <span class="user_name">{{ userInfo.realName }}</span>
            </div>
            <div class="user_info_menu">
                <div class="user_info_menu_item">用户信息</div>
                <div class="user_info_menu_item" @click="logout">退出登录</div>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
    import { useAsideMenuInfoStore } from "@/store/asideMenuInfo";
    import { useTopBreadcrumbInfoStore } from "@/store/topBreadcrumbInfo";
    import { useUserInfoStore } from "@/store/userInfo";
    import { useSettingInfoStore } from "@/store/settingInfo";
    import { computed, nextTick, reactive, ref, onMounted, onUnmounted} from "vue";
    import router from "@/router/index";
    import screenfull from "screenfull";

    let isFullScreen = ref(false)
    let supportFullScreen = ref(true)


    const asideMenuInfo = useAsideMenuInfoStore()
    let userInfo = useUserInfoStore()
    const topBreadcrumbInfo = useTopBreadcrumbInfoStore()
    const settingInfo = useSettingInfoStore()
    let refreshStyle = reactive({refresh: true, rotation: false})

    const switchTips = computed(() => {
        return topBreadcrumbInfo.showTopBreadcrumb ? "点击关闭顶部导航条" : "点击展示顶部导航条"
    })

    function clickRefresh() {
        settingInfo.isRefreshing = true
        refreshStyle.rotation = true
        nextTick(()=> {
            setTimeout(()=> {
                refreshStyle.rotation = false
                settingInfo.isRefreshing = false
            }, 500)
        })
    }

    function clickFullScreen() {
        if (screenfull.isEnabled) {
            if (screenfull.isFullscreen) {
                screenfull.exit().then(() => {
                    isFullScreen.value = false
                })
            } else {
                screenfull.request().then(() => {
                    isFullScreen.value = true
                })
            }
        } else {
            console.log("不支持全屏操作")
        }
    }

    function clickMenuCollapse() {
        asideMenuInfo.menuCollapse = !asideMenuInfo.menuCollapse
    }

    function logout() {
        router.push({
            name: "Login"
        })
        userInfo.token = ""
        userInfo.realName = ""
        userInfo.account = ""
    }

    function screenFullStateChanged() {
        isFullScreen.value = screenfull.isFullscreen
    }

    onMounted(()=> {
        supportFullScreen.value = screenfull.isEnabled
        if (screenfull.isEnabled) {
            screenfull.on('change', screenFullStateChanged);
        }
    })

    onUnmounted(()=>{
        screenfull.off('change', screenFullStateChanged);
    })


</script>

<style scoped lang="scss">
    .header_container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;

        .aside_menu_expand {
            margin-left: 20px;
            margin-right: 20px;
        }

        .header_title {
            color: white;
            font-size: 24px;
            font-weight: bold;
        }

        .space_fill {
            flex-grow: 1;
        }

        .refresh {
            background-color: white;
            border-radius: 15px;
            width: 30px;
            height: 30px;
            margin-right: 20px;
        }

        @keyframes rotateAnimation {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .rotation {
            animation: rotateAnimation 500ms linear infinite;
        }

        .full_screen {
            background-color: white;
            border-radius: 15px;
            width: 30px;
            height: 30px;
            margin-right: 20px;
        }

        .top_breadcrumb_switch {
            --el-switch-on-color: #13ce66;
            --el-switch-off-color: #ff4949;
            margin-right: 20px;
        }

        .user_info_container {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;

            .user_info {
                margin-right: 20px;
                display: flex;
                flex-direction: row;
                align-items: center;
                cursor: pointer;

                .user_name {
                    margin-left: 10px;
                    margin-right: 10px;
                    color: white;
                }
            }


            &:hover {
                .user_info_menu {
                    height: 80px;
                    width: 100px;
                    opacity: 1;
                    z-index: 999; // 调高页面层级

                    .user_info_menu_item {
                        font-size: 16px;
                        opacity: 1;
                    }
                }
            }

            .user_info_menu {
                width: 0px;
                height: 0px;
                opacity: 1;
                list-style-type: none;
                position: absolute;
                right: 20px;
                top: 60px;
                background-color: $primaryColor;
                cursor: pointer;
                transition: all 1s;

                &::before {
                    content: "";
                    display: block;
                    height: 2px;
                    width: 100%;
                    background-color: white;
                }

                .user_info_menu_item {
                    padding-left: 20px;
                    padding-right: 20px;
                    padding-top: 5px;
                    padding-bottom: 5px;
                    white-space: nowrap;
                    font-size: 0px;
                    opacity: 0;
                    transition: all 1s;

                    &:hover {
                        background-color: $asideBackgroundColor;
                    }
                }
            }
        }
    }
</style>